<script setup lang="ts">
//引入基础组件
import { ref } from 'vue'
//引入api 发送请求获取message列表
import { messagePage } from '@/apis/message/index'
import { onLoad, onShow } from '@dcloudio/uni-app'

const read = ref(false)

onShow(async () => {
    const data = await messagePage({ current: 1 })
    let arr = data.data?.records?.filter((item: any) => {
        return item.read === false
    })
    if (arr.length > 0) {
        read.value = false
    } else {
        read.value = true
    }
})

/**
 * 跳转到消息推送界面
 */
const handleGotoMessage = () => {
    uni.navigateTo({
        url: '/basePackage/pages/messagepush/index',
    })
}
</script>

<template>
    <view class="messagesend" @click="handleGotoMessage">
        <view v-if="!read" class="iconred"></view>
        <u-icon name="notice" custom-prefix="icon" class="iconfont" size="48" color="##475777"></u-icon>
    </view>
</template>

<style lang="scss" scoped>
@include b(messagesend) {
    width: 84rpx;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    //相对定位
    position: relative;
}
@include b(iconred) {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #ff0000;
    position: absolute;
    top: 0;
    right: 0;
}
</style>
